<template>
  <el-card class="card-box">
      <template #header>
          <div class="card-header">
            <span>各时间段到店人数</span>
          </div>
      </template>
      <div class='chart-wrap'>
        <div  ref="chartRef" class="chart-content" v-show="isShowChart"></div>
        <el-empty description="暂无数据" v-show="!isShowChart"/>
      </div>
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getChartVisitorsOption } from '../../echartOption'
  const props = defineProps({
    statisticData:{
      type:Array,
      default:()=>[]
    }
  })
  let chatData = reactive([]);
  let isShowChart = ref(false);
  const echartsInstance = shallowRef(null);
  const chartRef = shallowRef();
    const initChart = ()=>{
      const chatDataX = chatData?.map(ele => ele.visitTime) || [];
      const chatDataYnew = chatData?.map(ele => ele.newCustomerNum) || [];
      const chatDataYold = chatData?.map(ele => ele.oldCustomerNum) || [];
      const chatDataYvip = chatData?.map(ele => ele.vipCustomerNum) || [];
      const chatDataYtotal = chatData?.map(ele => ele.totalNum) || [];
      echartsInstance.value = null;
      echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
      const option = getChartVisitorsOption(chatDataX,chatDataYnew,chatDataYold,chatDataYvip,chatDataYtotal)
      echartsInstance.value.setOption(option,true)
      window.addEventListener('resize', resize)
    }
    onUnmounted(() => {
      // 组件卸载时销毁图表实例
      if(echartsInstance.value){
        echartsInstance.value.dispose();
      }
    });

    const resize = () =>{
      if(echartsInstance.value){
        echartsInstance.value?.resize()
      }
    }

    watch(() => props.statisticData,(newValue)=>{
      if(newValue?.length){
        chatData = newValue;
        isShowChart.value = true;
        nextTick(() => {
          initChart()
          resize()
        })
      }
      else{
        chatData = [];
        isShowChart.value = false;
      }
    },
    {
      deep: true,
      immediate: true
    })
</script>
<style lang="scss" scoped>
.card-box{
  width: 33%;
    .chart-wrap{
      width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      .chart-content{
        width: 100%;
        height: 100%;
      }
    }
}
</style>
